<template>
  <div
    :style="noBorder ? noBorder : ''"
    :class="narrowForm ? narrowForm : 'searchForm'"
  >
    <slot name="slectTree" />
    <el-form
      ref="form"
      :size="size"
      :inline="inline"
      :label-width="labelWidth"
      :model="searchData"
      label-position="right"
      :disabled="lookDis"
      :rules="rules"
      class="FormClass"
      :all-dblclick="AllDblclick"
    >
      <el-form-item
        v-for="(item, index) in searchForm"
        v-if="item.render ? item.render(searchData) : true"
        :key="index"
        :style="item.InputWidth"
        :class="item.class"
        :label="item.labelRender ? item.labelRender(searchData) : item.label"
        :prop="item.prop ? item.prop : ''"
      >
        <!--组合表单 -->
        <div v-if="item.type == 'group'">
          <div
            v-for="child in item.groupList"
            :key="child.prop"
            class="groupList"
          >
            <span :class="child.class">{{ child.first }}</span>
            <el-input
              v-if="child.type === 'Input'"
              v-model="searchData[child.prop]"
              :type="child.types ? child.types : 'text'"
              :clearable="child.clearable"
              :placeholder="child.placeholder"
              :style="{ width: child.width + '%' }"
              :disabled="child.disabled"
              @clear="child.clear()"
              @blur="child.blur ? child.blur(searchData[child.prop]) : ''"
              @dblclick.native="item.dbclick(searchData[child.prop])"
            />
            <!-- 下拉加载更多，可远程搜索 -->
            <el-select
              v-if="child.type === 'SelectSearch'"
              v-model="searchData[child.prop]"
              v-el-select-loadmore="child.loadmore"
              value-key="id"
              :multiple="child.multiple"
              :style="{ width: child.width + '%' }"
              :placeholder="child.placeholder"
              :clearable="true"
              filterable
              :remote="child.remote"
              reserve-keyword
              :remote-method="child.remoteMethod"
              :class="child.class ? child.class : ''"
              @change="child.change(searchData[child.prop])"
              @clear="child.clear()"
            >
              <el-option
                v-for="op in child.options
                  ? child.options
                  : child[child.prop].options"
                :key="op.id"
                :label="op.label"
                :value="op"
              />
            </el-select>
            <span :class="child.class">{{ child.name }}</span>
          </div>
          <i
            v-if="item.delete"
            class="el-icon-remove addBtn"
            @click="item.deleteClick(index, item.groupList)"
          />
        </div>
        <!-- 表格 -->
        <Table
          v-if="item.type == 'Table'"
          class="tableWrapper"
          :table-data="item.tableData"
          :row-header="item.rowHeader"
          :table-option="item.tableOption"
          @handleButton="item.handleButton"
          :page-obj="item.pageObj"
          @handleCurrentChange="item.handleCurrentChange"
          @handleSizeChange="item.handleSizeChange"
          element-loading-text="拼命加载中..."
          element-loading-background="rgba(0, 0, 0, 0.1)"
        />
        <!-- 树形组件 -->
        <el-tree
          v-if="item.type == 'Tree'"
          :ref="item.ref"
          :data="item.data"
          :props="item.defaultProps"
          show-checkbox
          :node-key="item.id || 'id'"
          :class="item.class"
          @check-change="item.handleCheckChange"
        />
        <!--文本 -->
        <span
          v-if="item.type == 'Text'"
          @click="item.addClick(index, item.groupList)"
        >
          {{
            item.textRender
              ? item.textRender(searchData)
              : searchData[item.prop]
          }}
          <i v-if="item.add" class="el-icon-circle-plus addBtn" />
        </span>
        <!-- 级联选择器 -->
        <el-cascader
          v-if="item.type === 'Cascader'"
          ref="eCascader"
          :key="item.key"
          v-model="searchData[item.prop]"
          filterable
          :options="item.cascaderOptions"
          :props="item.props"
          clearable
          :placeholder="item.placeholder"
          :style="{ width: item.width + '%' }"
          @change="item.change(searchData[item.prop])"
        />
        <!-- 异步 -->
        <el-cascader
          v-if="item.type === 'asyncCascader'"
          ref="asyncCascader"
          v-model="searchData[item.prop]"
          :props="item.props"
          clearable
          filterable
          :placeholder="item.placeholder"
          :style="{ width: item.width + '%' }"
          @change="item.change(searchData[item.prop])"
        />

        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'Select'"
          v-model="searchData[item.prop]"
          :multiple="item.multiple"
          :style="{ width: item.width + '%' }"
          :placeholder="item.placeholder"
          :clearable="true"
          filterable
          :disabled="item.disabled || false"
          :collapse-tags="item.isTag ? item.isTag : false"
          @change="item.change(searchData[item.prop])"
          @clear="item.clear()"
        >
          <el-option
            v-for="op in item.options"
            :key="op.id"
            :label="op.label"
            :value="op.value"
          />
        </el-select>
        <!-- 下拉加载更多，可远程搜索 -->
        <el-select
          v-if="item.type === 'SelectSearch'"
          v-model="searchData[item.prop]"
          v-el-select-loadmore="item.loadmore"
          :multiple="item.multiple"
          :style="{ width: item.width + '%' }"
          :placeholder="item.placeholder"
          :clearable="true"
          filterable
          :remote="item.remote"
          reserve-keyword
          :remote-method="item.remoteMethod"
          :class="item.class ? item.class : ''"
          :collapse-tags="true"
          @change="item.change(searchData[item.prop])"
          @clear="item.clear()"
          @focus="item.focus ? item.focus() : ''"
        >
          <el-option
            v-for="op in item.options"
            :key="op.id"
            :label="op.label"
            :value="op.value"
          />
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-if="item.type === 'Radio'"
          v-model="searchData[item.prop]"
          @change="item.change(searchData[item.prop])"
        >
          <el-radio
            v-for="(ra, index) in item.radios"
            :key="index"
            :label="ra.value"
            >{{ ra.label }}</el-radio
          >
        </el-radio-group>
        <!-- 单选按钮 -->
        <el-radio-group
          v-if="item.type === 'RadioButton'"
          v-model="searchData[item.prop]"
          @change="item.change && item.change(searchData[item.prop])"
        >
          <el-radio-button
            v-for="ra in item.radios"
            :key="ra.value"
            :label="ra.value"
            >{{ ra.label }}</el-radio-button
          >
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group
          v-if="item.type === 'Checkbox'"
          v-model="searchData[item.prop]"
          :class="item.class ? item.class : ''"
          @change="item.handleCheckedCitiesChange"
        >
          <el-checkbox
            v-if="item.isCheckAll"
            v-model="item.checkAll"
            :indeterminate="item.isIndeterminate"
            @change="item.handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox
            v-for="ch in item.checkboxs"
            :key="ch.value"
            :label="ch.value"
            :indeterminate="ch.isIndeterminate"
            >{{ ch.label }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- 日期 -->
        <el-date-picker
          v-if="item.type === 'Date'"
          v-model="searchData[item.prop]"
          type="date"
          value-format="yyyy-MM-dd"
          :placeholder="item.placeholder"
          :style="{ width: item.width + '%' }"
          :picker-options="item.packerOptions"
          :clearable="item.clearable"
          :editable="false"
          @change="item.change(searchData[item.prop])"
        />

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
        <!-- 日期范围 -->
        <el-date-picker
          v-if="item.type === 'DateRange'"
          v-model="searchData[item.prop]"
          :style="{ width: item.width + '%' }"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <!-- 时间 -->
        <el-time-select
          v-if="item.type === 'Time'"
          v-model="searchData[item.prop]"
          type
        />
        <!-- 日期时间 -->
        <el-date-picker
          v-if="item.type === 'DateTime'"
          v-model="searchData[item.prop]"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :placeholder="item.placeholder"
          :picker-options="item.packerOptions"
          :disabled="item.disable && item.disable(searchData[item.prop])"
          @change="item.change(searchData[item.prop])"
        />
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'Input'"
          v-model="searchData[item.prop]"
          :type="item.types ? item.types : 'text'"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          :style="{ width: item.width + '%' }"
          :disabled="item.disabled"
          :max="item.max"
          :min="item.min"
          :readonly="item.readonly ? item.readonly : false"
          @clear="item.clear()"
          @focus="item.focus ? item.focus() : ''"
          @blur="item.blur ? item.blur(searchData[item.prop]) : ''"
          @input="item.input ? item.input(searchData[item.prop]) : ''"
          @dblclick.native="
            AllDblclick == true
              ? allDbCK(item, searchData[item.prop])
              : item.dbclick(item, searchData[item.prop])
          "
        />
        <span
          :class="item.secondClass"
          :style="item.secondClass ? 'margin-left: 20px' : ''"
          >{{ item.second }}</span
        >

        <el-input
          v-if="item.type === 'InputButton'"
          v-model="searchData[item.prop]"
          :type="item.types ? item.types : 'text'"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          :style="{ width: item.width + '%' }"
          :disabled="item.disabled"
          @clear="item.clear()"
        >
          <el-button
            slot="append"
            :disabled="item.disabledBtn"
            icon="el-icon-search"
            @click="item.getLonLatClick"
            >{{ item.name }}</el-button
          >
        </el-input>
        <!-- 图片 -->
        <img
          v-if="item.type == 'image'"
          :src="searchData[item.prop]"
          alt=""
          :style="item.style"
        />
        <!-- 输入文本域 -->
        <el-input
          v-if="item.type === 'textarea'"
          v-model="searchData[item.prop]"
          type="textarea"
          :autosize="item.autosize"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          :style="{ width: item.width + '%' }"
          @clear="item.clear()"
        />
        <!-- 上传头像 -->
        <el-upload
          v-if="item.type == 'uploadAva'"
          class="avatar-uploader"
          action="api/fastdfs/upload"
          :limit="item.limit"
          list-type="picture-card"
          :show-file-list="false"
          :headers="headers"
          :on-success="item.handleAvatarSuccess"
          :before-upload="item.beforeAvatarUpload"
        >
          <img
            v-if="searchData[item.prop]"
            :src="searchData[item.prop]"
            class="avatar"
          />
          <!-- <i class="el-icon-delete" v-if="searchData[item.prop]" @click='item.handleRemove()'></i> -->
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <!-- 上传图片 -->
        <el-upload
          v-if="item.type == 'upload'"
          action="api/fastdfs/upload"
          :list-type="item.listType"
          :auto-upload="false"
          :limit="item.limit"
          :on-success="item.handleAvatarSuccess"
          :before-upload="item.beforeAvatarUpload"
        >
          <i class="el-icon-plus" />
          <div slot="file" slot-scope="{ file }">
            <img
              v-if="searchData[item.imgUrl]"
              class="el-upload-list__item-thumbnail"
              :src="searchData[item.imgUrl]"
              alt=""
            />

            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in" />
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="item.handleDownload(file)"
              >
                <i class="el-icon-download" />
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="item.handleRemove(file)"
              >
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
        <!-- 上传文件-->
        <!-- :file-list="item.fileList" -->
        <el-upload
          v-if="item.type == 'file'"
          ref="upload"
          class="upload-demo"
          :headers="headers"
          :action="item.action"
          :on-preview="item.handlePreview"
          :on-remove="item.handleRemove"
          :on-success="item.handleAvatarSuccess"
          :on-error="handleAvatarError"
          :on-progress="item.handleAvatarProgress"
          :before-upload="item.beforeAvatarUpload"
          :auto-upload="true"
          :limit="item.limit"
          :show-file-list="true"
          :http-request="item.handleChange"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
            :disabled="item.disabled"
            >{{ item.text }}</el-button
          >
          <p v-if="item.isShowTip" slot="tip" class="el-upload__tip">
            请先下载文件模板
          </p>
        </el-upload>
        <!-- 富文本编辑器 -->
        <div v-if="item.type === 'ueditor'">
          <ueditor
            v-model="searchData[item.prop]"
            :is-clear="item.isClear"
            :is-edit="item.isEdit"
            @changeUeditor="changeUeditor"
          />
        </div>
        <!-- <div class="ueditor"   ref="ueditor"></div> -->
        <!-- 地区选择 -->
        <div v-if="item.type === 'VDistpicker'">
          <v-distpicker @selected="selected" />
        </div>
        <!-- 开关 -->
        <el-switch
          v-if="item.type === 'Switch'"
          v-model="searchData[item.prop]"
          :active-text="item.activeText"
          :inactive-text="item.inactiveText"
          :active-color="item.activeColor ? item.activeColor : '#13ce66'"
          :inactive-color="item.inactiveColor ? item.inactiveColor : '#ff4949'"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <!-- </div> -->
      <!-- 按钮 -->
      <!-- style="display: inline-block" -->
      <!-- :class="{
            [item.class]: item.class,
            clickButton: clickBtn == item.id ? true : false,
          }" -->
      <div v-if="isHandle" :class="handleClass ? handleClass : 'InlineBlock'">
        <el-form-item
          v-for="item in searchHandleK"
          v-if="item.handleShow ? item.handleShow() : true"
          :key="item.id"
          :class="[
            item.class,
            item.isClick === true && clickBtn == item.id ? clickButton : '',
          ]"
          :style="item.style"
        >
          <!-- 普通按钮 -->
          <el-button
            v-if="!item.icon && !item.iconShow"
            :id="item.id"
            :disabled="item.disabled"
            :type="item.type ? item.type : 'primary'"
            :size="item.size || size"
            :plain="item.plain"
            :style="item.style"
            :class="item.isDisplay ? 'disBtn' : ''"
            @click="handleToggle(item)"
          >
            <span
              :class="item.isDisplay ? 'disBtn' : ''"
              @click="item.isDisplay ? item.isDisplay() : item.handle"
              >{{ item.textRender ? item.textRender(item.label) : item.label }}
            </span>
            <!-- 显示设置 -->
            <slot v-if="item.isDisplaySet" name="displaySet" />
            <slot v-if="item.isPopoverSet" name="popoverSet" />
            <slot v-if="item.isTimeSet" name="TimeSet" />
            <slot v-if="item.dataQueryTimeSet" name="dataQueryTimeSet" />
            <slot v-if="item.isAllSet" name="allSet" />
          </el-button>
          <!-- 加提示的按钮 -->
          <el-tooltip
            v-else-if="item.icon && !item.iconShow"
            :content="item.label"
            effect="light"
            placement="top"
          >
            <el-button
              :disabled="item.disabled"
              :type="item.type"
              :size="item.size || size"
              :plain="item.plain"
              :icon="item.icon"
              @click="handleToggle(item)"
            />
          </el-tooltip>
          <!-- 加图标按钮 -->
          <el-button
            v-else-if="item.icon && item.iconShow"
            :disabled="item.disabled"
            :type="item.type"
            :size="item.size || size"
            :plain="item.plain"
            :icon="item.icon"
            @click="handleToggle(item)"
          >
            {{ item.label }}
          </el-button>
          <!-- 加图片的按钮 -->
          <el-button
            v-else-if="item.iconUrl && item.iconShow"
            :disabled="item.disabled"
            :type="item.type"
            :size="item.size || size"
            :plain="item.plain"
            @click="handleToggle(item)"
          >
            <span
              :class="item.isDisplay ? 'disBtn' : ''"
              @click="item.isDisplay ? item.isDisplay() : item.handle"
            >
              <img :src="item.iconUrl" />
              {{ item.label }}
            </span>
            <slot v-if="item.isPopoverSet" name="popoverSet" />
            <slot v-if="item.isTimeSet" name="TimeSet" />
            <slot v-if="item.dataQueryTimeSet" name="dataQueryTimeSet" />
          </el-button>
        </el-form-item>
        <slot name="colorPicker" />
        <slot name="selectReal" />
      </div>
      <!-- 提交取消按钮 -->
      <div v-if="!lookDis" class="inline">
        <el-form-item v-for="item in operation" :key="item.index">
          <el-button
            v-if="item.type == 'submit'"
            type="primary"
            @click="submitForm('form', item.label)"
            >{{ item.label }}
          </el-button>
          <el-button
            v-if="item.type == 'reset'"
            @click="resetForm('form', item.label)"
          >
            {{ item.label }}
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-button
      v-if="lookNeed"
      class="goback"
      type="primary"
      @click="$emit('toback')"
      >返回</el-button
    >
  </div>
</template>

<script>
import Table from "@/components/Table/baseTable";
import Ueditor from "@/components/ueditor/index.vue";
import { mapGetters } from "vuex";
export default {
  name: "SearchForm",
  components: {
    Ueditor,
    Table,
    // DisplaySet,
    // 'Test',{ template:"#test" }
  },
  props: {
    AllDblclick: {
      type: Boolean,
      default: false,
    },
    handleClass: {
      type: String,
      default: "",
    },
    narrowForm: {
      type: String,
      default: "",
    },
    lookDis: {
      type: Boolean,
      default: false,
    },
    InputWidth: {
      type: String,
      default: "",
    },
    inline: {
      type: Boolean,
      default: true,
    },
    noBorder: {
      type: String,
      default: "",
    },
    form: {
      type: Object,
      default: () => {},
    },
    rules: {
      type: Object,
      default: () => {},
    },
    isHandle: {
      type: Boolean,
      default: true,
    },
    operation: {
      type: Array,
      default: () => [],
    },
    lookNeed: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "small",
    },
    opAwidth: {
      type: String,
      default: "",
    },
    searchForm: {
      type: Array,
      default: () => [],
    },
    searchHandle: {
      type: Array,
      default: () => [],
    },
    searchData: {
      type: Object,
      default: () => {},
    },
    inline: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      clickBtn: null,
      clickButton: "clickButton",
      isClick: false,
    };
  },
  computed: {
    ...mapGetters(["token"]),
    headers() {
      return {
        token: this.token,
      };
    },
    searchHandleK(val) {
      var arr = [];
      arr = this.searchHandle;
      arr.map((v, i) => {
        if (i === 0) {
          v.isClick = true;
          this.clickBtn = v.id;
        }
      });
      return arr;
    },
  },
  methods: {
    allDbCK(data, value) {
      this.$emit("allDbCK", data, value);
    },
    handleToggle(item) {
      this.$set(item, "isClick", !item.isClick);
      if (item.id || item.id === "") {
        this.clickBtn = item.id;
        if (item.isClick === true) {
          this.searchHandleK.map((v) => {
            if (v.id !== item.id) {
              this.$set(v, "isClick", false);
            } else {
              this.$set(v, "isClick", true);
            }
          });
        }
      } else {
        this.clickBtn = null;
      }
      item.handle(item);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    resetForm(formName, label) {
      this.$refs.form.resetFields();
      this.$emit("goback", label);
    },
    submitForm(formName, label) {
      this.$refs.form.resetFields();
      this.$emit("submitForm", label);
    },
    changeUeditor(name) {
      this.$emit("changeUeditor", name);
    },
    selected(data) {
      this.$emit("selected", data);
    },
    handleAvatarError(err, file, fileList) {
      if (err) {
        this.$message.error("请稍后重试");
      }
    },
    handleAvatarProgress(event, file, fileList) {
      this.$emit("handleAvatarProgress", event, file, fileList);
    },
  },
};
</script>

<style lang="scss">
.searchForm {
  .addBtn {
    font-size: 28px;
    margin-left: 10px;
    color: #409eff;
    cursor: pointer;
    position: absolute;
  }
  .el-icon-remove {
    margin-left: -7px;
  }

  .el-upload__tip {
    margin-top: 0;
  }
  .avatar-uploader {
    .el-icon-delete {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .el-icon-delete:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
  }

  .groupByTimeForm {
    .el-form-item__label {
      //color: #fff;
      font-size: 16px;
      padding: 0;
    }
  }
  /* .inline {
        display: inline-block;
    } */

  .inline {
    display: flex;
    justify-content: center;
  }

  .inline .el-form-item__content {
    margin-left: 20px !important;
  }

  .form .noline {
    display: block;
  }

  .ueditor {
    width: 900px;
  }

  .opAwidth {
    // width: 30%;
    margin: auto;
  }

  .formWidth {
    width: 100%;
    .el-form-item {
      width: 100%;
    }
    .el-form-item__content {
      width: 75%;
    }
  }

  .avatarSize {
    width: 100%;
    height: 100%;
  }

  .InlineBlock {
    display: inline-block;
  }

  .clickButton {
    .el-button {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
  }
}
</style>
